<template>
  <div class="center">
    <el-card class="box-card">
      <el-row>
        <el-col :span="6">
          <p>店铺访问数（UV）</p>
          <p style="margin:5px 0;">0</p>
          <span>较前一天-1%</span>
          <i class="el-icon-sort-down"></i>
          <i class="el-icon-sort-up"></i>
        </el-col>
        <el-col :span="6">
          <p>店铺访问量（PV）</p>
          <p style="margin:5px 0;">0</p>
          <span>较前一天1%</span>
          <i class="el-icon-sort-down"></i>
          <i class="el-icon-sort-up"></i>
        </el-col>
        <el-col :span="6">
          <p>商品访客数</p>
          <p style="margin:5px 0;">0</p>
          <span>较前一天-45.5%</span>
          <i class="el-icon-sort-down"></i>
          <i class="el-icon-sort-up"></i>
        </el-col>
        <el-col :span="6">
          <p>商品访问量</p>
          <p style="margin:5px 0;">0</p>
          <span>较前一天2%</span>
          <i class="el-icon-sort-down"></i>
          <i class="el-icon-sort-up"></i>
        </el-col>
      </el-row>
    </el-card>
    <div class="flex-clomun flex-box">
      <el-alert style="margin:10px 0;" title="流量趋势" type="info" :closable="false" effect="dark"></el-alert>
      <Echarts id="main2" :options="optionsLine" class="echarts" style="width: 100%;height: 300px"></Echarts>
      <div style="width:100%">
        <el-alert style="margin:10px 0;" title="流量分布" type="info" :closable="false" effect="dark"></el-alert>
        <Echarts
          id="main1"
          :options="option"
          class="echarts"
          style="width: 300px;height: 300px;margin-left:20px"
        ></Echarts>
        <el-table :data="tableData" style="width: 60%">
          <el-table-column prop="date" label="类型">
            <template slot-scope="scope">{{scope}}</template>
          </el-table-column>
          <el-table-column prop="name" label="访问量（浏览器）"></el-table-column>
          <el-table-column prop="address" label="访客数"></el-table-column>
          <el-table-column prop="address" label="访问商品数"></el-table-column>
        </el-table>
      </div>

      <el-alert style="margin:10px 0;" title="访问深度" type="info" :closable="false" effect="dark">
        <div style="float:right">
          <el-date-picker v-model="value2" type="month" placeholder="选择月"></el-date-picker>
        </div>
      </el-alert>
      <div class="flex-box">
        <p>购买分布</p>
        <Echarts
          id="main4"
          :options="optionsLine"
          class="echarts"
          style="width: 300px;height: 300px;margin-left:20px"
        ></Echarts>
        <p>渠道分布</p>
        <Echarts
          id="main5"
          :options="option"
          class="echarts"
          style="width: 300px;height: 300px;margin-left:20px"
        ></Echarts>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Echarts from "../comm/chart.vue"; //组件
export default {
  data: function() {
    return {
      value2: "",
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ]
          }
        ]
      },
      options2: {
        title: {
          text: "新老客户转化率趋势"
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      },
      optionsLine: {
        title: {
          text: "趋势图"
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      }
    };
  },
  components: {
    Echarts
  },
  mounted() {
    console.log(echarts);
  }
};
</script>

<style>
.echarts {
  float: left;
}
.el-icon-sort-down {
  color: green;
}
.el-icon-sort-up {
  color: red;
}
.flex-box {
  display: flex;
}
.flex-clomun {
  flex-direction: column;
  align-items: center;
}
.el-alert__content{
    width: 100%;
}
.el-alert__title{
    float: left;
}
</style>